<template>
  <div class="app-container">
    <el-button style="margin:8px;" icon="el-icon-plus" type="primary" @click="addHandler">
      添加管理员
    </el-button>
    <el-table
      v-loading="listLoading"
      :data="adminList"
      :default-sort="{ prop: 'date', order: 'ascending' }"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >

      <el-table-column align="center" prop="date" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.uid }}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="头像">
        <template slot-scope="scope">
          <img :src="scope.row.avatar" style="width: 50px;height: 50px;border-radius: 50%;">
        </template>
      </el-table-column>

      <el-table-column width="105px" align="center" label="用户名">
        <template slot-scope="scope">
          <span v-text="scope.row.username"></span>
        </template>
      </el-table-column>

      <el-table-column width="120px" align="center" label="名称">
        <template slot-scope="scope">
          <span>{{ scope.row.nickname }}</span>
        </template>
      </el-table-column>

      <el-table-column width="200px" align="center" label="密码">
        <template slot-scope="scope">
          <span>{{ scope.row.password }}</span>
        </template>
      </el-table-column>

      <el-table-column width="200px" align="center" label="邮箱">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>

      <el-table-column width="200px" align="center" label="电话">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="200">
        <template slot-scope="scope">
          <el-button style="display: none" type="danger" icon="el-icon-delete" circle @click="changeRole(scope.row.uid,1)"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle @click="changeRole(scope.row.uid,1)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible"
      width="30%">
      <el-select v-model="choose" placeholder="请选择">
        <el-option
          v-for="item in unAdminList"
          :key="item.uid"
          :username="item.username"
          :avatar="item.avatar"
          :value="item.uid">
          <el-avatar :src="item.avatar" :size="30" ></el-avatar>
          <span style="float: right; color: #8492a6; font-size: 13px">{{ item.username }}</span>
        </el-option>
      </el-select>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="changeRole(choose,2)">添 加</el-button>
    </span>
    </el-dialog>


  </div>
</template>

<script>
import {  getAdmin,getUnAdmin,changeRole}  from '@/api/user'

export default {
  name: 'UserManager',
  data() {
    return {
      dialogFormVisible: false,
      adminList:[],
      unAdminList:[],
      listLoading: true,
      choose:''
    }
  },
  created() {
    this.getList()
  },

  methods: {


    getList() {
       getAdmin().then(res => {
         this.adminList = res.data
       })

      getUnAdmin().then(res => {
        this.unAdminList = res.data
      })

      this.listLoading = false;
    },

    changeRole(uid,role){
      changeRole(uid,role).then(res => {
        if(res.code===200){
          this.$message({
            message: '修改成功',
            type: 'success'
          })
          this.getList()
        }else{
          this.$message({
            message: res.message,
            type: 'error'
          })
        }
      })
      this.dialogFormVisible= false
    },

    addHandler(){
      this.dialogFormVisible = true
      this.choose = ''
    }

  }

}
</script>

<style scoped>
.el-button:nth-child(1) {

}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
.post-item__preview {
  width: 200px;
  height: 120px;
  border-radius: 10px;
  background-size: cover;
  background-position: 50%;
}
.delay-0 {
  -webkit-animation-delay: 0ms;
  animation-delay: 0ms;
  -webkit-animation-fill-mode: backwards !important;
  animation-fill-mode: backwards !important;
}
.text-center {
  text-align: center !important;
}
.flex {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  /* flex样式呈现*/
  display: flex;
  /*垂直排列*/
  flex-direction: column;
  align-items: center; /*由于flex-direction: column，因此align-items代表的是水平方向*/
  justify-content: center; /*由于flex-direction: column，因此justify-content代表的是垂直方向*/
}
.flex {
  flex: 1;
}
.text-white {
  color: #fff !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
</style>
